<template>
	<div class="loading" v-if="showLoading">
		<main :style="[{'height':winHeight+'px'},{'padding-top':paddingTop+'px'}]">
			<div class="load">
				<i class="iconfont icon-jiazai" style="font-size: 1rem;margin-bottom: 0.1rem;"></i>
				<label>加载中...</label>
			</div>
		</main>
	</div>
</template>

<script>
import {mapState} from 'vuex';
export default{
	name:'Loading',
	data(){
		return {
			winHeight:0,//组件高度
			paddingTop:0,//组件距离顶部的高度
		}
	},
	computed:{
		...mapState(['showLoading'])
	},
	methods:{
		Loading(){
			//设置组件距离顶部的高度
			this.paddingTop = window.pageYOffset || document.documentElement.scrollTop || 0;
		}
	},
	mounted() {
		this.winHeight = window.document.documentElement.clientHeight;
		let timer;
		let flag = true;//判断是否打开滚动监听
		window.addEventListener('scroll',()=>{
			//设置定时器
			if(flag && this.showLoading)this.Loading();
			//关闭开关
			flag = false;
			//清除定时器
			clearTimeout(timer);
			//设置定时器，每隔15毫秒，打开一次开关
			timer = setTimeout( ()=>{ flag = true } , 10);
		} , true);
	}
}
</script>

<style scoped>
.loading{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
.loading main{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loading main .load{
	width: 2.2rem;
	height: 2.2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	border-radius: 0.15rem;
	background-color: rgba(75, 75, 75, 0.5);
	backdrop-filter:blur(2px);
}
.loading main .load i{
	transform:rotate(0deg);
	animation: 2s xuanzhuan linear infinite;
}
@keyframes xuanzhuan{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}
</style>
